<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{background-color: gray}
	div {width: 100px; height: 100px; background-color: red;margin-top:20px;filter:alpha(opacity:30); opacity: 0.3;color: #fff;text-align: center;line-height: 100px;font-weight: bold;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var aDiv = document.getElementsByTagName('div');

		for (var i = 0; i < aDiv.length; i++) {
			aDiv[i]._alpha = 30;							//在这里是给每一个div都单独设置一个自定义属性！！！！！

			aDiv[i].onmouseover = function (){
				doMove( this, 100 )
			}

			aDiv[i].onmouseout = function (){
				doMove( this, 30 )
			}
		};
	}

	//var alpha = 30;		//所有div共用一个alpha变量，这会造成连续改变div时会相互影响,所以我们需要给每一个div都单独一个自定义属性
	function doMove( obj, target ) {
		//obj._alpha = 30;		//不能放这里设置，否则鼠标移开div不透明度会直接调到30
		clearInterval( obj.timer );
		obj.timer = setInterval(function(){
			var speed = ( target - obj._alpha )/40;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor( speed );

			obj._alpha = obj._alpha + speed;		//需要再把当前值再重新给到obj.alpha以用于下一次的循环
			if ( obj._alpha > target && speed > 0 || obj._alpha < target && speed < 0 ) {
				obj._alpha = target;
			};

			obj.style.filter = 'alpha(opacity:'+ obj._alpha +')';
			obj.style.opacity = obj._alpha/100;
			obj.innerHTML = obj._alpha;

			if ( obj._alpha == target ) {
				clearInterval( obj.timer );
			};
		},30)	
	}
	</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>